<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-06-26 16:23:26
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-04 21:03:07
-->
<template>
    <div class="container" :style="{ background: bgColor }">
        <!-- 顶部导航区域 -->
        <div class="navigation" id="navigation" ref="navigation" :style="{ fontSize: titleFont + 'px', color: titleColor }">
            农业数据实时监控系统
        </div>
        <div class="changeTheme" @click="change">主题切换</div>
        <!-- 底部大盒子 -->
        <div class="content">
            <!-- 左侧俩个 -->
            <div class="left-content">
                <div class="left-content-top">
                    <classify></classify>
                </div>
                <div class="left-content-bottom">
                    <cart></cart>
                </div>
            </div>
            <!-- 中间俩个 -->
            <div class="center-content">
                <div class="center-content-top">
                    <mine></mine>
                </div>
                <div class="center-content-bottom">
                    <crop></crop>
                </div>
            </div>
            <!-- 右侧俩个 -->
            <div class="right-content">
                <div class="right-content-top">
                    <line-o></line-o>
                </div>
                <div class="right-content-bottom">
                    <pig></pig>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import { mapActions } from 'vuex'
import classify from '../../components/search/classify.vue'
import cart from '../../components/search/cart.vue'
import mine from '../../components/search/mine.vue'
import crop from '../../components/search/Crop.vue'
import lineO from '../../components/search/line.vue'
import pig from '../../components/search/pig.vue'
export default {
    data() {
        return {
            bgColor: '#fff',
            titleFont: '40',
            titleColor: '#333',
            isShow: true  //是否是白色主题  true:是 false:否
        }
    },
    methods: {
        //标题自适应
        screen() {
            const width = document.getElementById('navigation').offsetWidth;
            this.titleFont = width / 100 * 3
        },
        ...mapActions({
            themeState: 'home/themeActions'
        }),
        //主题切换
        change() {
            this.isShow = !this.isShow
            this.themeState(this.isShow)
            if (this.isShow) {  //白色主题
                this.bgColor = '#fff';
                this.titleColor = '#333333';
                return
            }
            //否则黑色主体
            this.bgColor = '#333333';
            this.titleColor = '#fff'
        }
    },
    mounted() {
        document.title = this.$route.meta.title
        this.screen()
        window.addEventListener('resize', this.screen)
    },
    watch: {},
    computed: {},
    filters: {},
    components: {
        classify,
        cart,
        mine,
        crop,
        lineO,
        pig
    }
}
</script>
<style scoped>
img {
    width: 100px;
    height: 100px;
}

.container {
    display: flex;
    flex-direction: column;
    /* background-image: url(../../../public/img/bgc01.png) */
    /* background-color: #333333; */
}

/* 顶部导航样式 */
.navigation {
    flex: 2;
    width: 100%;
    /* background-color: orange; */
    background-image: url(../../../public/img/top02.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    font-weight: 600;
    color: #000;
    text-align: center;
    /* line-height: 3.2rem; */
}

.content {
    flex: 15;
    display: flex;
}

/* 左侧盒子 */
.content .left-content {
    flex: 1;
    /* border: 1px solid #38C5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.content .left-content .left-content-top {
    width: 95%;
    height: 53%;
    border: 1px solid #38C5EC;
}

.content .left-content .left-content-bottom {
    width: 95%;
    height: 42%;
    border: 1px solid #38C5EC;
}

/* 中间盒子 */
.content .center-content {
    flex: 2;
    /* border: 1px solid #38C5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.content .center-content .center-content-top {
    width: 95%;
    height: 22%;
    border: 1px solid #38C5EC;
}

.content .center-content .center-content-bottom {
    width: 95%;
    height: 75%;
    border: 1px solid #38C5EC;
}

/* 右侧盒子 */
.content .right-content {
    flex: 1;
    /* border: 1px solid #38C5EC; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.content .right-content .right-content-top {
    width: 95%;
    height: 48%;
    border: 1px solid #38C5EC;
}

.content .right-content .right-content-bottom {
    width: 95%;
    height: 48%;
    border: 1px solid #38C5EC;
}

/* 主题切换 */
.changeTheme {
    color: #4CD964;
    position: fixed;
    top: 62.5px;
    right: 1.25rem;
}
</style>
  